<template>
     <el-button class="primary" @click="saveExpalin">确认保存</el-button>
     <div ref="editorElem" style="height: 500px;"></div> 
</template>

<script>
import wangEditor from 'wangeditor'
    export default{
        name: 'ProductDetail',
        data() {
            return {
                productId: 0,
                editor:null, 
            }
        },
        methods: {
            saveExpalin(){
                const data = {}
                if (this.productDetailId){
                    data.id = this.productDetailId
                }else{
                    data.productId = this.productId
                }
                data.intro = this.editor.txt.html();
                this.$axios({
                    method: 'post',
                    url: '/productDetail',
                    data: data
                }).then(res=>{
                    if (res && res.data.code==200){
                        this.$message.success('更新商品详情成功');
                    }else{
                        this.$message.error(res.data.msg);
                    }
                }).catch(error=>{
                    this.$message.error(error.message);
                })
            },
            createEditor(){
                // 初始化编辑器
                this.editor = new wangEditor(this.$refs.editorElem);

                // 配置编辑器
                this.editor.config.uploadImgShowBase64 = true; // 显示Base64编码的图片
                this.editor.config.uploadImgMaxLength = 5 * 1024 * 1024; // 限制上传图片的大小为5MB

                // 创建编辑器
                this.editor.create();
            },
            getDetail(){
                //根据餐品id查询详情
                this.$axios({
                    method: 'get',
                    url: '/productDetail/'+this.productId
                }).then(res=>{
                    console.log('查询到的商品详情---',res);
                    if (res && res.data.code == 200){

                        this.productDetailId = res.data.data.id;
                        this.editor.txt.html(res.data.data.intro);//在编辑器中显示html内容
                    }
                }).catch(error=>{

                })
            }
        },
        mounted(){
            this.createEditor();
            console.log('------------', this.$route.params.productId)
            if (!this.$route.params.productId){
                this.$router.push('/product');
            }
            this.productId = this.$route.params.productId;
            this.getDetail();
        }
        
    } 
</script>

<style>
</style>